<!-- Author: Edwin -->
<template>
  <el-dialog :visible.sync="dialogVisible"
             append-to-body
             destroy-on-close>
    <div slot="title">
      <div class="title">
        {{ blockInfo.name }}
        <el-tag v-if="blockInfo.type === 'trigger'"
                hit
                size="mini"
                type="success">{{ blockInfo.type }}
        </el-tag>
        <el-tag v-if="blockInfo.type === 'action'"
                hit
                size="mini"
                type="danger">{{ blockInfo.type }}
        </el-tag>
        <el-tag v-if="blockInfo.type === 'logger'"
                hit
                size="mini"
                type="warning">{{ blockInfo.type }}
        </el-tag>
      </div>
    </div>
    <!-- <el-form>
      <el-form-item label="Description">
        {{ blockInfo.description }}
      </el-form-item>
    </el-form> -->
    <div class="description">{{ blockInfo.description }}</div>
    <el-card shadow="never">
      <ScriptRender :blockInfo='blockInfo'
                    :dataForm='dataForm'
                    :showJson='scriptJson'/>
    </el-card>
    <span slot="footer"
          class="dialog-footer">
      <el-button size="mini"
                 @click="dialogVisible = false">Cancel</el-button>
      <el-button size="mini"
                 type="primary"
                 @click="dialogVisible = false">Confirm</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ScriptRender from '@/components/script-render/index'

export default {
  components: { ScriptRender },
  data () {
    return {
      dialogVisible: false,
      blockInfo: {},
      scriptJson: [],
      dataForm: {}
    }
  },
  // computed: {
  //   scriptJson () {
  //     return this.blockInfo.paramsJson ? JSON.parse(this.blockInfo.paramsJson).fields : []
  //   }
  // },
  methods: {
    open (blockInfo) {
      this.dialogVisible = true
      this.blockInfo = blockInfo
      this.init()
    },
    init () {
      this.scriptJson = this.blockInfo.paramsJson ? JSON.parse(this.blockInfo.paramsJson).fields : []
      this.dataForm = this.blockInfo.paramsValue ? this.blockInfo.paramsValue : {}
    }
  }
}
</script>

<style lang='scss' scoped>
.title {
  font-weight: bold;
  font-size: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.description {
  padding-bottom: 20px;
}
</style>
